<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi">

<script type="text/javascript" src="Monkey-Event-2.1.js"></script>
<!--<script type="text/javascript" src="vconsole.min.js"></script>-->
<script type="text/javascript" src="canvasDrawImages.js?v1.3"></script>
<script src="/js/assets/monkey.js"></script>
<title>test</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    html, body{
        width: 100%;
        height: 100%;
    }

    #imgStage{
        transform-origin: 50% 50%;
    }

</style>
</head>

<body style="">

    <div id="box1" style="width: 100%; height: 100%; overflow: hidden">
    </div>


    <script>
        let myCanvasDraw = new canvasDrawImages({
            containerElement: document.querySelector('#box1'),
            width:750,
            height: 1500,
            minScale: 0.3, //缩放最小倍数
            // ontouchMove: function (hitLayer) {
            //     console.log(hitLayer)
            // }
        });

        //添加事件
        myCanvasDraw.ontouchMove = function (hitLayer) {
            //选中元素对象
            console.log(hitLayer)
        }

        myCanvasDraw.ontouchDown = function (hitLayer) {
            console.log(hitLayer)
        }

        myCanvasDraw.addLayer('/img/login-round.jpg');
        myCanvasDraw.addLayer('/img/wx_share.jpg');
        myCanvasDraw.addLayer('/img/leads-content.png');


        // myCanvasDraw.addLayer('/img/get-liangfuli.png');

        var img1 = new Image();
        img1.src = '/img/get-liangfuli.png';
        var imgM;
        img1.onload = function () {
            imgM = new ImgMaterial(img1, myCanvasDraw.width / 2, myCanvasDraw.height / 2);
            //透明度
            //imgM.alpha = 0.2;
            myCanvasDraw.addChild(imgM);
            //禁止拖动
            //imgM.touchDisable = true;
            //顶点测试显示
            imgM.test = true;

            // setTimeout(function () {
            //     //删除元素
            //     myCanvasDraw.removeChild(imgM);
            // }, 3000)
        };

        setTimeout(() => {
            //设置层级
            myCanvasDraw.setChildIndex(imgM, 0);
        }, 3000);

        //添加文本
        var textM = new TextMaterial('#ff0000', 'fdfdf fdfdf,.fdfd..fdfdfdfffdfdfdfffffdfdsfdsafsafsafasfasfasfasfaffds fdfdsfadfasf fdfdffdf，test carkfc fdsfaffa fdsfafdafs fdsafsfdasf fdsafdafdasdfdffdfdf fdsafad爱你哦car test hello fdfdxs fdfddfd dfdf fdfd幅度发发顺丰发送发达安抚发t', 200, 50, 500, 60); //参数：颜色，文本内容，位置坐标x，位置坐标y，文本内容宽度，文本行高
        myCanvasDraw.addChild(textM);
        textM.setFont('40px Arial');

        //导出图片
        myCanvasDraw.toDataURL('test');

    </script>


</body>
</html>
